
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/admin.css">
    <link rel="stylesheet" href="layui/css/log.css">
</head>
<style>
    .layui-form{
        width: 300px;
        height: 336px;
        min-height: 260px;
        max-height: 260px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        padding: 20px;
        z-index: 130;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 3px 18px #0c0c0c;
        font-size: 16px;
    }
</style>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="/*display: none;*/background-color: #5A5F6E">
    <%--    <div id="hk" class="container" style="display: none;position:absolute;top: 290px">
            <div id="captcha" style="position: relative"></div>
        </div>--%>
    <div class="layadmin-user-login-main">

        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">

            <form id="f1">
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <h2>服装厂管理系统</h2>
                </div>
                <div class="layui-form-item" >
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                    <input type="text" id="userCode"  lay-verify="required" placeholder="用户名" class="layui-input"  name="rolePhone">
                </div>
                <div class="layui-form-item" >
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                    <input type="password" id="password" lay-verify="required" placeholder="密码" readonly onfocus="this.removeAttribute('readonly');" class="layui-input" name="rolePassword">
                </div>
            </form>
            <button type="button" class="layui-btn layui-btn-warm layui-btn-radius" onclick="getUpdatePhone()">修改密码</button>
            <div class="layui-form-item" style="text-align: center">
                <button class="layui-btn layui-btn-fluid" lay-submit  style="width: 100px; " id="CaptchaId" onclick="userLogin()">登 入</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/layui/layui.js" type="text/javascript"></script>
<script type="text/javascript">
    function getUpdatePhone() {
        window.location.href="verifyPhone.jsp";
    }

    // 定义回调函数
    function callback(res) {
        // 第一个参数传入回调结果，结果如下：
        // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
        // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
        // CaptchaAppId       String    验证码应用ID。
        // bizState    Any       自定义透传参数。
        // randstr     String    本次验证的随机串，后续票据校验时需传递该参数。
        console.log('callback:', res);


        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
        // res（请求验证码发生错误，验证码自动返回terror_前缀的容灾票据） = {ret: 0, ticket: "String", randstr: "String",  errorCode: Number, errorMessage: "String"}
        // 此处代码仅为验证结果的展示示例，真实业务接入，建议基于ticket和errorCode情况做不同的业务处理
        if (res.ret === 0) {


            $("input[name='ticket']").val(res.ticket)
            $("input[name='randstr']").val(res.randstr)
            $("input[name='captchaAppId']").val(res.appid)
            let data = {};
            let value = $('#f1').serializeArray();
            $.each(value, function (index, item) {
                data[item.name] = item.value;
            });
            let role = JSON.stringify(data);
            console.log(role)
            $.ajax( {
                "url"            :  "login/userLogin",
                "type"         :  "post",
                "data"         :  role,
                "dataType" :  "json",
                "contentType":"application/json;charset=utf-8",
                "success"  :  function(result) {
                    if(result.code==200){
                        window.location.href="toMain"
                    }
                },
                "error"       :  function() {
                    alert("出错了")
                }
            } );

        }
    }

    // 定义验证码js加载错误处理函数
    function loadErrorCallback() {
        var appid = '197440885';
        // 生成容灾票据或自行做其它处理
        var ticket = 'terror_1001_' + appid + '_' + Math.floor(new Date().getTime() / 1000);
        callback({
            ret: 0,
            randstr: '@'+ Math.random().toString(36).substr(2),
            ticket: ticket,
            errorCode: 1001,
            errorMessage: 'jsload_error'
        });
    }



    // 定义验证码触发事件
    window.onload = function(){
        document.getElementById('CaptchaId').onclick = function(){
            try {
                // 生成一个验证码对象
                // CaptchaAppId：登录验证码控制台，从【验证管理】页面进行查看。如果未创建过验证，请先新建验证。注意：不可使用客户端类型为小程序的CaptchaAppId，会导致数据统计错误。
                //callback：定义的回调函数
                var captcha = new TencentCaptcha('197440885', callback, {});
                // 调用方法，显示验证码
                captcha.show();
            } catch (error) {
                // 加载异常，调用验证码js加载错误处理函数
                loadErrorCallback();
            }
        }
    }

</script>
</body>
</html>